<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> -->
    <script src="jquery-js/jquery-3.6.3.min.js"></script>
    <title>Document</title>
    <style>
      .divClass {
        width: 100px;
        height: 100px;
        background-color:#f00;
      }
    </style>
    <script>
        window.onload = function(){
            console.log("window.onload 执行了")
      }
      
      $(function () {
        console.log("$(function () {} 执行了")
        $("#btn1").click(function () {
          $("#div1").addClass("divClass");
        });

        $("#btn2").click(function(){
            // 点击之后控制 div2 隐藏
            $("#div2").hide(2000)
        })
        $("#btn3").click(function(){
            // 点击之后控制 div2 显示
            $("#div2").fadeIn(5000)
        })
      });
      $(function () {
        console.log("$(function () {} 执行了2")
    })

      
    </script>
  </head>
  <body>
    <div id="div1">我是一个div</div>
    <button id="btn1">点我变颜色</button>

    <div class="divClass" id="div2">我是div2</div>
    <button id="btn2">隐藏</button>
    <button id="btn3">显示</button>
    <script>
        console.log("页面加载完成")
    </script>
  </body>
</html>
